<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>头像上传</title>
    <link rel="stylesheet" href="__JQCJ__/dStudent/css/style.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src="__JQCJ__/dStudent/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="__JQCJ__/dStudent/js/cropbox.js"></script>
<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action">
            <!-- <input type="file" id="file" style=" width: 200px">-->
            <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
                <label for="upload-file">上传头像</label>
            </a>
                <input type="file" class="" name="upload-file" id="upload-file" />
            </div>
        <input type="hidden" id="idGet" value="<{$id}>">
            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  ><br />
            <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" ><br />
            <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切"><br />
        <input type="button" id="tjCrop"  class="Btnsty_peyton" value="提交"><br />
    </div>
    <div class="cropped"></div>
</div>
<script type="text/javascript">
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'images/avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#upload-file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;" id="small"><p>64px*64px</p>');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;" id="middle"><p>128px*128px</p>');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;" id="big"><p>180px*180px</p>');
            //border-radius:180px;box-shadow:0px 0px 12px #7E7E7E
            $('#tjCrop').click(function(){
                var data= {
                    small_photo: $('#small').attr('src'),
                    middle_photo:$('#middle').attr('src'),
                    big_photo:$('#big').attr('src'),
                    student_id:$('#idGet').val(),
                };
                $.post('<{:U("Student/doEditStudent")}>',data,function () {
                    var url="<{:U('Student/success')}>";
                    self.location=url;
                });

            });
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
</body>
</html>
